<template>
  <div>
    <div class="search">
      <img src="../assets/img/fanhui.png" alt="" class="back" @click="goBack" />
      <input type="text" placeholder="搜索订单" />
      <img src="../assets/img/cart.png" alt="" class="cart" />
    </div>
    <div class="nav">
      <van-tabs v-model:active="active">
        <van-tab title="我的物品">
          <ul class="productList">
            <li v-for="item in cartList" :key="item.id">
              <div class="top">
                <img :src="item.url" alt="" />
                <p>{{ item.title }}</p>
              </div>
              <div class="info">
                <i>{{ item.num }}</i
                >&nbsp;件商品&nbsp;&nbsp; 合计:￥
                <b>{{ item.price }}.00</b>&nbsp;&nbsp;已完成
              </div>
            </li>
          </ul>
        </van-tab>

        <van-tab title="我的门票">
          <ul class="tickets">
            <li v-for="item in buystickList" :key="item.id">
              <div class="wodetop">
                <div>
                  <img :src="item.img" alt="" />
                </div>
                <div>
                  <p>{{ item.title }}</p>
                  <h5>入场时间：{{ item.time }}</h5>
                </div>
              </div>
              <div class="wodebom">
                <div>
                  <span>数量：{{ item.num }}&nbsp;&nbsp;</span
                  ><strong
                    >合计：¥{{ item.price * item.num }}.00&nbsp;&nbsp;</strong
                  ><em>已完成</em>
                </div>
              </div>
            </li>
          </ul>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs } from "vant";

import { ref } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    const router = useRouter();
    const active = ref(2);
    const buystickList = JSON.parse(sessionStorage.getItem("buystick"));
    const cartList = JSON.parse(sessionStorage.getItem("cart"));
    const goBack = () => {
      router.go(-1);
    };
    console.log(router);
    return { active, buystickList, cartList, goBack };
  },

  components: {
    vanTab: Tab,
    vanTabs: Tabs,
  },
};
</script>

<style lang="less" scoped>
.tickets {
  li {
    margin-top: 10px;
    padding: 10px;
    background-color: #fff;
    .wodetop {
      display: flex;

      border-bottom: 1px solid #e6e6e6;
      padding-bottom: 10px;
      > div {
        margin-right: 15px;
        &:nth-child(1) {
          width: 65px;
          height: 65px;
          overflow: hidden;
          > img {
            width: 100%;
          }
        }
        &:nth-child(2) {
          > p {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            height: 50px;
            color: #333333;
          }
          > h5 {
            font-size: 10px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
          }
        }
      }
    }
    .wodebom {
      padding-top: 10px;
      text-align: right;
      font-size: 10px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      > div {
        > em {
          font-weight: normal;
        }
      }
    }
  }
}
.search {
  background-color: white;
  display: flex;
  justify-content: space-around;
  height: 54px;
  align-items: center;
  .back {
    height: 14px;
    width: 8px;
  }
  .cart {
    width: 20px;
    height: 18px;
  }
  input {
    width: 303px;
    height: 27px;
    border-radius: 13px;
    background-color: #f5f5f5;
    border: 1px solid rgb(184, 184, 184);
    line-height: 27px;

    &::placeholder {
      text-align: center;
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #b3b3b3;
      //   line-height:15px;
      // text-align: center;
    }
  }
}

.productList {
  li {
    background-color: white;
    margin-top: 9px;
    height: 118px;
    font-size: 10px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    padding: 9px;
    .top {
      border-bottom: 1px solid #e6e6e6;
      display: flex;
      img {
        width: 63px;
        height: 63px;
        margin-bottom: 9px;
        margin-right: 9px;
      }
      p {
        font-size: 14px;
        width: 250px;
        line-height: 18px;
      }
    }
    .info {
      height: 45px;
      text-align: right;
      line-height: 35px;
      margin-right: 10px;
    }
  }
}
</style>
